document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const canvas = document.getElementById('signaturePad');
    const clearBtn = document.getElementById('clearBtn');
    const undoBtn = document.getElementById('undoBtn');
    const saveBtn = document.getElementById('saveBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const copyBtn = document.getElementById('copyBtn');
    const penColor = document.getElementById('penColor');
    const penSize = document.getElementById('penSize');
    const resultContainer = document.getElementById('resultContainer');
    const signatureResult = document.getElementById('signatureResult');
    const savedSignaturesContainer = document.getElementById('savedSignaturesContainer');
    
    // 初始化签名板
    const signaturePad = new SignaturePad(canvas, {
        minWidth: 1,
        maxWidth: 4,
        penColor: '#000000',
        backgroundColor: 'rgba(255, 255, 255, 0)',
        velocityFilterWeight: 0.7,
        throttle: 16, // 增加平滑度
        // 修复鼠标位置与笔画不匹配问题
        dotSize: function() {
            return (this.minWidth + this.maxWidth) / 2;
        }
    });
    
    // 我们不再需要单独添加事件监听器，因为SignaturePad库已经处理了事件
    // 但我们需要确保SignaturePad正确处理触摸和鼠标事件
    
    // 重新绑定SignaturePad以确保正确处理坐标
    function rebindSignaturePad() {
        // 解除当前的SignaturePad实例
        signaturePad.off();
        
        // 重新创建SignaturePad实例
        signaturePad = new SignaturePad(canvas, {
            minWidth: penSize.value / 2,
            maxWidth: penSize.value * 2,
            penColor: penColor.value,
            backgroundColor: 'rgba(255, 255, 255, 0)',
            velocityFilterWeight: 0.7,
            throttle: 16,
            dotSize: function() {
                return (this.minWidth + this.maxWidth) / 2;
            }
        });
        
        // 重新绑定endStroke事件
        signaturePad.addEventListener('endStroke', () => {
            saveDrawState();
        });
    }
    
    // 调整画布大小以适应容器
    function resizeCanvas() {
        // 获取设备像素比
        const ratio = Math.max(window.devicePixelRatio || 1, 1);
        const container = canvas.parentElement;
        
        // 保存当前的绘图数据（如果有）
        let data = null;
        if (!signaturePad.isEmpty()) {
            data = signaturePad.toData();
        }
        
        // 设置canvas的显示大小（CSS像素）
        canvas.style.width = container.offsetWidth + 'px';
        canvas.style.height = '300px';
        
        // 设置canvas的实际大小（物理像素）
        canvas.width = container.offsetWidth * ratio;
        canvas.height = 300 * ratio;
        
        // 调整canvas的坐标系统
        const ctx = canvas.getContext('2d');
        ctx.scale(ratio, ratio);
        
        // 清除签名并恢复数据（如果有）
        signaturePad.clear();
        if (data) {
            signaturePad.fromData(data);
        }
    }
    
    // 不再需要单独的fixSignaturePadPosition函数，因为我们已经在初始化时添加了事件监听器
    
    // 初始调整画布大小
    resizeCanvas();
    
    // 窗口大小改变时调整画布大小
    window.addEventListener('resize', function() {
        resizeCanvas();
        // 重新绑定SignaturePad以确保坐标系统正确
        rebindSignaturePad();
    });
    
    // 初始化时调用一次rebindSignaturePad
    rebindSignaturePad();
    
    // 保存绘制历史以实现撤销功能
    let drawHistory = [];
    
    // 每次绘制结束时保存当前状态
    signaturePad.addEventListener('endStroke', () => {
        saveDrawState();
    });
    
    function saveDrawState() {
        drawHistory.push(signaturePad.toDataURL());
    }
    
    // 清除按钮点击事件
    clearBtn.addEventListener('click', () => {
        signaturePad.clear();
        drawHistory = [];
    });
    
    // 撤销按钮点击事件
    undoBtn.addEventListener('click', () => {
        if (drawHistory.length > 0) {
            // 移除最后一个状态
            drawHistory.pop();
            
            if (drawHistory.length > 0) {
                // 恢复到上一个状态
                const img = new Image();
                img.src = drawHistory[drawHistory.length - 1];
                img.onload = () => {
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0);
                };
            } else {
                // 如果没有历史状态，则清空画布
                signaturePad.clear();
            }
        }
    });
    
    // 更新画笔颜色
    penColor.addEventListener('change', (e) => {
        signaturePad.penColor = e.target.value;
        // 重新绑定SignaturePad以确保坐标系统正确
        rebindSignaturePad();
    });
    
    // 更新画笔大小
    penSize.addEventListener('change', (e) => {
        const size = e.target.value;
        signaturePad.minWidth = size / 2;
        signaturePad.maxWidth = size * 2;
        // 重新绑定SignaturePad以确保坐标系统正确
        rebindSignaturePad();
    });
    
    // 保存签名
    saveBtn.addEventListener('click', () => {
        if (signaturePad.isEmpty()) {
            showToast('请先绘制签名');
            return;
        }
        
        // 添加加载动画
        saveBtn.classList.add('loading');
        saveBtn.disabled = true;
        
        // 模拟处理延迟
        setTimeout(() => {
            const signatureData = signaturePad.toDataURL('image/png');
            
            // 显示结果
            displaySignature(signatureData);
            
            // 保存到历史签名
            saveToHistory(signatureData);
            
            // 移除加载动画
            saveBtn.classList.remove('loading');
            saveBtn.disabled = false;
        }, 800);
    });
    
    // 显示签名结果
    function displaySignature(dataUrl) {
        signatureResult.innerHTML = `<img src="${dataUrl}" alt="签名">`;
        resultContainer.classList.add('show');
        
        // 滚动到结果区域
        resultContainer.scrollIntoView({ behavior: 'smooth' });
    }
    
    // 下载签名
    downloadBtn.addEventListener('click', () => {
        if (!resultContainer.classList.contains('show')) {
            showToast('请先生成签名');
            return;
        }
        
        const dataUrl = signatureResult.querySelector('img').src;
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = `签名_${formatDate(new Date())}.png`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        showToast('签名已下载');
    });
    
    // 复制签名到剪贴板
    copyBtn.addEventListener('click', async () => {
        if (!resultContainer.classList.contains('show')) {
            showToast('请先生成签名');
            return;
        }
        
        const img = signatureResult.querySelector('img');
        
        try {
            const blob = await fetch(img.src).then(r => r.blob());
            await navigator.clipboard.write([
                new ClipboardItem({
                    [blob.type]: blob
                })
            ]);
            showToast('签名已复制到剪贴板');
        } catch (err) {
            console.error('复制失败:', err);
            showToast('复制失败，请重试');
        }
    });
    
    // 保存签名到历史记录
    function saveToHistory(dataUrl) {
        // 获取已保存的签名
        const savedSignatures = JSON.parse(localStorage.getItem('signatures')) || [];
        
        // 创建新的签名对象
        const newSignature = {
            id: Date.now(),
            dataUrl: dataUrl,
            date: new Date().toISOString()
        };
        
        // 添加到数组开头
        savedSignatures.unshift(newSignature);
        
        // 限制保存的数量为10个
        if (savedSignatures.length > 10) {
            savedSignatures.pop();
        }
        
        // 保存到本地存储
        localStorage.setItem('signatures', JSON.stringify(savedSignatures));
        
        // 更新显示
        loadSavedSignatures();
    }
    
    // 加载保存的签名
    function loadSavedSignatures() {
        const savedSignatures = JSON.parse(localStorage.getItem('signatures')) || [];
        savedSignaturesContainer.innerHTML = '';
        
        if (savedSignatures.length === 0) {
            savedSignaturesContainer.innerHTML = '<p class="no-data">暂无保存的签名</p>';
            return;
        }
        
        savedSignatures.forEach(signature => {
            const item = document.createElement('div');
            item.className = 'saved-signature-item';
            item.innerHTML = `
                <img src="${signature.dataUrl}" alt="保存的签名">
                <div class="saved-signature-actions">
                    <button class="action-btn load-btn" data-id="${signature.id}"><i class="fas fa-sync"></i> 加载</button>
                    <button class="action-btn delete-btn" data-id="${signature.id}"><i class="fas fa-trash"></i> 删除</button>
                </div>
                <small>${formatDate(new Date(signature.date))}</small>
            `;
            savedSignaturesContainer.appendChild(item);
        });
        
        // 添加加载和删除事件
        document.querySelectorAll('.load-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = parseInt(e.currentTarget.dataset.id);
                loadSignature(id);
            });
        });
        
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = parseInt(e.currentTarget.dataset.id);
                deleteSignature(id);
            });
        });
    }
    
    // 加载签名到画布
    function loadSignature(id) {
        const savedSignatures = JSON.parse(localStorage.getItem('signatures')) || [];
        const signature = savedSignatures.find(sig => sig.id === id);
        
        if (signature) {
            const img = new Image();
            img.src = signature.dataUrl;
            img.onload = () => {
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                
                // 更新绘制历史
                drawHistory = [signature.dataUrl];
                
                // 显示结果
                displaySignature(signature.dataUrl);
            };
            
            showToast('签名已加载到画布');
        }
    }
    
    // 删除保存的签名
    function deleteSignature(id) {
        let savedSignatures = JSON.parse(localStorage.getItem('signatures')) || [];
        savedSignatures = savedSignatures.filter(sig => sig.id !== id);
        localStorage.setItem('signatures', JSON.stringify(savedSignatures));
        
        loadSavedSignatures();
        showToast('签名已删除');
    }
    
    // 格式化日期
    function formatDate(date) {
        return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
    }
    
    function padZero(num) {
        return num.toString().padStart(2, '0');
    }
    
    // 显示提示消息
    function showToast(message) {
        // 移除现有的toast
        const existingToast = document.querySelector('.toast');
        if (existingToast) {
            existingToast.remove();
        }
        
        // 创建新的toast
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        // 显示toast
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);
        
        // 3秒后隐藏
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                toast.remove();
            }, 300);
        }, 3000);
    }
    
    // 初始加载保存的签名
    loadSavedSignatures();
});